@use './common.scss';
@use './theme.scss';
@use './element-plus-ui.scss';
@use './special-effects.scss';
@use '../fonts/font.css';
@use '../iconfont/sv-icons.css';
@use '../iconfont/uni-icons.css';
@use '../iconfont/admin-icons.css';
@use '../iconfont/colorui-icons.css';

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
}

a {
  text-decoration: none;
}

/* 滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background-color: var(--el-border-color-darker);
  border-radius: 20px;
}

/* 主内容区域 */
.page-container {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--page-gap);

  // 用于取消间隙
  &.no-gap {
    gap: 0;
  }

  // 第一级子节点禁止flex默认压缩
  & > * {
    flex-shrink: 0;
  }
}

/* 表格筛选栏 */
.table-filter {
  padding: 18px var(--page-padding) 0;

  .el-form {
    .el-row .el-col {
      .el-form-item {
        width: 100%; // 默认铺满栅格
        margin-right: 0; // 取消右间距，使用el-row的gutter代替
      }
    }
  }
}

/* 表格容器 */
.table-container {
  height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--page-gap);
  padding: var(--page-padding);

  // 用于取消间隙
  &.no-gap {
    gap: 0;
  }

  // 第一级子节点禁止flex默认压缩
  & > * {
    flex-shrink: 0;
  }

  // 需要流式布局的 flex-shrink 不能为 0
  .el-table {
    flex-grow: 1;
    flex-shrink: 1;
  }
}

/* 保持宽高比并填充容器，但可能会裁剪部分图片 */
.bg-img-cover {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/* 保持宽高比并填充容器，且不会裁剪图片，但图片可能不会完全填满容器 */
.bg-img-contain {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* 填充满容器，但图片可能会变形 */
.bg-img-full {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.card {
  background-color: var(--card-bg-color);
  border: 1px solid var(--card-border-color);
  box-shadow: 0 0 6px 4px var(--card-shadow-color);
  border-radius: var(--el-border-radius-base);
}

.glass {
  background-color: var(--glass-bg-color);
  backdrop-filter: blur(16px);
}
